一、元素标签分类

在html5中，元素标签主要分成三大块，分别是块级（block）标签、行内（inline）标签和行内块（inline-block）标签。

块级（block）标签

1. 块级（block）标签主要包含div、p、h1、h2...等标签
2. 布局格式为独占一行
3. 在盒子模型上，设置所有的属性都会有效

行内（inline）标签

1. 内联（inline）标签主要包含有span、a、strong等标签
2. 布局格式是能够与其他元素在同一行上
3. 盒子模型上，不可以设置width和height，是靠内容撑开，并且padding-top，padding-bottom，margin-top，margin-bottom不会对其他元素造成影响。

行内块（inline-block）标签

1. 主要包含img、input、textarea标签
2. 行内块标签可以与其他元素独占一行
3. 盒子模型也支持设置所有属性，集成行内和块级标签的优点。

二、link标签和@import的区别

1. 从属性关系区别。@import是CSS提供的语法规则，只有导入样式的左右。而link是html的标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性、引入网站图标等。
2. 加载顺序区别。加载页面时，link标签引入的CSS被同时加载；@import引入的CSS将在页面加载完毕后被加载。
3. 兼容性区别。@import是CSS2.1后才有的语法，link标签是HTML元素，不存在兼容性问题。
4. DOM可控性区别。link可以通过DOM操作来改变样式，@import则无法通过DOM操作。

重绘和回流

重绘：当渲染树中的一些元素需要更新属性，这些属性只会影响元素的外观、风格，而不会影响布局，如background-color；回流：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局。重绘不一定会引发回流，但是回流必定会发生重绘。

常见的回流

• 添加/删除DOM
• 元素尺寸改变
• 内容变化，如在input输入文字
• 浏览器窗口尺寸改变，resize事件发生时
• 计算offsetWidth和offsetHeight时
• 设置style属性的值
• 修改默认字体。

用visibility与dispaly控制元素的显示与隐藏有什么差别

1. visibility隐藏后还会在文档上留着位置，而display: none不会。
2. visibility只会重绘，而display会引发回流。